<template>
  <div class="CourseMenu">
    <div class="courseInfo">
      <div class="pic">
        <img :src="this.$route.query.image" />
        <span>课程门户</span>
      </div>
      <p class="info">{{$store.state.courseList[0].name}}</p>
    </div>

    <!-- 选择栏 -->
    <tab-control :selections="selections" @tabClick="tabClick" />
  </div>
</template>

<script>
import TabControl from '@/components/content/tabControl/TabControl';

export default {
  name: 'CourseMenu',
  components: { TabControl },
  data() {
    return {
      selections: {
        0: { name: '任务', icon: 'task' },
        1: { name: '作业', icon: 'work' },
        2: { name: '考试', icon: 'cexam' },
        3: { name: '学习记录', icon: 'record' },
      } /* 左侧导航栏 */,
    };
  },
  created(){
    this.initInfo()
  },
  methods: {
    initInfo(){
      
    },

    tabClick(index) {
      this.$emit('tabItemClick', index);
    },
  },
};
</script>

<style scoped>
.CourseMenu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 180px;
  z-index: 9;
  background-color: #fff;
}
.CourseMenu .courseInfo {
  width: 138px;
  margin: 0 auto;
  margin-top: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.courseInfo .pic {
  position: relative;
  width: inherit;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
}

.courseInfo .pic img {
  height: 100%;
  width: 100%;
}

.courseInfo .pic span {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 100%;
  height: 24px;
  line-height: 26px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}

.courseInfo .info {
  margin-top: 14px;
  font-size: 16px;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>